<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="${ctx}/js/jquery-3.1.1.min.js"></script>
    <%@ include file="../../css.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/css/select2.min.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/css/jquery-ui-1.9.2.custom.css" type="text/css">
    <style>
        .table-tr,td{
            width: 10%;
        }
        .table{
            height: 381px;
        }
        #dHead{

        }
        @media print {
            .see{
                display: none;
            }
        }

        @page  {
            size: a4 ;
        }

    </style>

    <link href="${ctx}/css/select2.min.css" rel="stylesheet" />


    <title>回收统计</title>
</head>

<body>
<div id="saper-container">
    <div id="saper-hd"></div>
    <div>
        <div class="subfiled clearfix see">
            <h2>回收统计</h2>
        </div>
        <div class="subfiled-content">
            <div class="panel-default">
                <div class="search-box clearfix see" style="position: relative">
                    <div id="app2" class="kv-item clearfix" style="!important;margin-bottom: 0px">
                        <div class="kv-item-content" style="margin-left: 30px; ">
                            <select  id="depId" style="width: 150px" onchange="selectedChange()" @change="showPack" v-model="departmentId">
                                <option value="0" selected="selected">请选择科室</option>
                                <option v-for="dep in depList" v-bind:value="dep.departmentId">{{dep.departmentName}}
                                </option>
                            </select>
                        </div>

                        <div class="kv-item-content" style="margin-left: 20px; ">
                            <input style="padding-left: 32px ;padding-right: 8px"  name="time" id="time" type="text" class="ui-datepicker-time"   />
                            <div class="ui-datepicker-css">
                                <div class="ui-datepicker-quick">
                                    <p>快捷日期<a class="ui-close-date">X</a></p>
                                    <div>
                                        <input @click="timeChangeFun"  class="ui-date-quick-button" type="button" value="今天" alt="0"  name=""/>
                                        <input @click="timeChangeFun" class="ui-date-quick-button" type="button" value="昨天" alt="-1" name=""/>
                                        <input @click="timeChangeFun" class="ui-date-quick-button" type="button" value="7天内" alt="-6" name=""/>
                                        <input @click="timeChangeFun" class="ui-date-quick-button" type="button" value="14天内" alt="-13" name=""/>
                                        <input @click="timeChangeFun" class="ui-date-quick-button" type="button" value="30天内" alt="-29" name=""/>
                                        <input @click="timeChangeFun" class="ui-date-quick-button" type="button" value="60天内" alt="-59" name=""/>
                                    </div>
                                </div>
                                <div class="ui-datepicker-choose">
                                    <p>自选日期</p>
                                    <div class="ui-datepicker-date">
                                        <input @click="timeChangeFun" name="startDate" id="startDate" class="startDate" readonly value="2014/12/20" type="text">
                                        -
                                        <input @click="timeChangeFun" name="endDate" id="endDate" class="endDate" readonly  value="2014/12/20" type="text" disabled  onchange="datePickers()">

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="kv-item-content" style="margin-left: 20px; ">
                            <input @keyup.enter="showPack" type="text" placeholder="关键字" name="searchTxt"
                                   v-model=searchTxt    class="search_text">
                        </div>

                        <div class="kv-item-content" style="margin-left: 10px; ">
                            <span >总数切换：</span>
                            <input style="width: 15px" @click="showPack"  type="checkbox" id="total" />
                        </div>
                        <a style="margin-left: 20px; " @click="moring" href="javascript:;" class="sapar-btn sapar-btn-recom query-btn">上午</a>
                        <a style="margin-left: 20px; " @click="afternoon" href="javascript:;" class="sapar-btn sapar-btn-recom query-btn">下午</a>
                        <div class="kv-item-content" style="margin-left: 10px; ">
                            <select  id="sendId" style="width: 150px;" onchange="selectedChange()"  v-model=sendId>
                                <option value="" selected="selected">请选择配送区域</option>
                                <option v-for="send in sendList" :value="send.sendId">{{send.sendName}}
                                </option>
                            </select>
                        </div>
                        <div class="kv-item-content" style="margin-left: 10px; ">
                            <a  @click="moring" href="javascript:;" class="sapar-btn sapar-btn-recom query-btn" onclick="print()">打印</a>
                        </div>
                        <div class="kv-item-content" style="margin-left: 10px; ">
                            <a @click="moring" href="javascript:;" class="sapar-btn sapar-btn-recom query-btn">打印全部</a>
                        </div>

                        <div class="xtbutton" style="position: absolute ; right: 30px;">
                            <a href="javascript:;" @click="del" class="sapar-btn sapar-btn-recom query-btn " style="background: #c62b26 ;border:1px solid #c62b26">删除</a>
                            <a href="javascript:;" @click="edit" class="sapar-btn sapar-btn-recom query-btn ">修改</a>
                        </div>
                        <%--<div class="btn-group" role="group" aria-label="..." style="">--%>
                        <%--<button type="button" class="btn btn-default sapar-btn sapar-btn-recom query-btn" style="line-height: 10px">删除</button>--%>
                        <%--<button type="button" class="btn btn-default sapar-btn sapar-btn-recom query-btn" style="line-height: 10px">增加</button>--%>
                        <%--</div>--%>
                    </div>
                </div>

                <!--表格开始-->
                <div id="app" v-cloak class="table panel-body">
                    <%--<!--表格操作-->--%>
                    <%--<div class="table-operate ue-clear">--%>
                    <%--<a href="javascript:;" class="add">添加</a> <a href="javascript:;"--%>
                    <%--class="edit">修改</a> <a href="javascript:;" class="del">删除</a>--%>
                    <%--</div>--%>
                    <!--表格具体内容-->
                    <div class="panel-body" style="!important;padding-top: 0px">
                        <table class="table-hover">
                            <thead>
                            <tr>
                                <th><input type="checkbox" @click="IcheckAll"/></th>
                                <th>科室
                                    <a href="javascript:selectedChange(3);">排</a>
                                </th>
                                <th>网篮</th>
                                <th>包名</th>
                                <th>数量</th>
                                <th>交接人</th>
                                <th>回收人</th>
                                <th>时间
                                    <select onchange="selectedChange(value)" >
                                        <option value=0>升</option>
                                        <option value=1>降</option>
                                    </select>
                                </th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr v-for="(item, index) in page.list" :key="item.huishouWupinbaoTiaoma">
                                <td v-bind:data="item.tiaomaArr"><input type="checkbox" name="packageTiaoma" @click="Icheck(index,$event)"/></td>
                                <td>{{depMap[item.huishouKeshi]}}</td>
                                <td>{{wlMap[item.huishouWanglan]}}</td>
                                <td>{{item.huishouBaoname}}</td>
                                <td>{{item.packageNum}}</td>
                                <td>{{empMap[item.zsHuishou.huishouJiaojierenTiaoma]}}</td>
                                <td>{{empMap[item.zsHuishou.huishouHuishourenTiaoma]}}</td>
                                <td>{{item.zsHuishou.huishouTime}}</td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                    <div class="panel-footer clearfix see">
                        <jsp:include page="${ctx}/page/pagination.jsp"/>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
<div id="saper-ft">

</div>
</div>

</body>
<script type="text/javascript" src="${ctx}/js/bootstrap.min.js"></script>

<script src="${ctx}/js/jquery-ui-1.9.2.custom.js" type = "text/javascript" language="javascript"></script>
<script src="${ctx}/js/share.js" type = "text/javascript"></script>
<%@ include file="../../js.jsp" %>

<script type="text/javascript">

    $(function () {

//        $('#depId').select2({
//            width:150,
//            allowClear: true,
//            formatResult: function (item) {
//                var str = item.text;
//                var idx = str.indexOf('|');
//                return str.substring(0,idx);
//            },
//            formatSelection: function (item) {
//                var str = item.text;
//                var idx = str.indexOf('|');
//                return str.substring(0,idx);
//            },
//            placeholder: '--请选择--'
//        });

        $('select').select2();
        <%--$(".packMx").live("dblclick", function () {--%>
            <%--$(this).addClass("xuanzhong").siblings().removeClass("xuanzhong");--%>
            <%--var packId = $(this).attr("data");--%>
            <%--//找儿子的典例--%>
            <%--var name = $(this).find("td:eq(2)").text();--%>
            <%--layer.open({--%>
                <%--type: 2,--%>
                <%--title: name + '包明细',--%>
                <%--maxmin: true,--%>
                <%--shadeClose: true, //点击遮罩关闭层--%>
                <%--area: ['800px', '520px'],--%>
                <%--content: '${ctx}/wutiaoma/findQixieListPeibao.do?id=' + packId + '&name=' + name--%>
            <%--});--%>
        <%--})--%>
    });


    var vue = $BySlin.addPage("/recover/recoverList", "#app", function (type, data, index) {
    }, true, ['addressName']);

    var vm = new Vue({
        el: '#app2',
        data: {
            departmentId: 0,
            depList: [],
            searchTxt: "",
            time:"",
            sendList:[],
            sendId:"",
        },
        watch:{
            time:function () {
                this.showPack();
            }

        },
        created: function () {
            this.load();

        },
        methods: {
            edit:function () {
                var chk_value = getSelRecord().ck;
                if (chk_value.length == 1) {
                    var data = getSelRecord().chk_value;
                    var num = 0;
                    var depName = "";
                    var packageName = "";
                    $("input[name='packageTiaoma']:checked").each(function () {
                        var that = this;
                        depName = $(that).parent().next().text();
                        packageName = $(that).parent().next().next().next().text();
                        num = $(that).parent().next().next().next().next().text()
                    })
                        layer.open(
                        {
                            type: 2,
                            title: '包明细',
                            maxmin: true,
                            shadeClose: true, //点击遮罩关闭层
                            area : ['600px' , '600px'],
                            content: '/recover/recoverEdit?depName='+depName+"&packageName="+packageName+"&num="+num+"&data="+data,
                        });
                } else {
                    layer.msg("请选择并只能选择一条数据！");
                }
            },
            del:function(){
                var chk_value = getSelRecord().chk_value;
                console.log(chk_value);
                if (chk_value.length > 0) {
                    layer.confirm('你确定要删除么？', function () {
                        $.ajax({
                            type: "POST",
                            data:{"packageList":JSON.stringify(chk_value)},
                            url: "${ctx}/recover/recoverDel",
                            error: function (request) {
                                layer.alert("网络故障，请稍后再试!");
                            },
                            success: function (data) {
                                if (data.status == true) {
                                    layer.alert("删除成功", function (index) {
                                        vm.showPack();
                                        layer.close(index);
                                    });
                                } else {
                                    layer.msg(data.msg);
                                }
                            }
                        });
                    });
                } else {
                    layer.msg('请选择要删除的数据！');
                }
            },

            B: function() {
                var that = this;
                var timevar = $("#time").val();
                if(that.time!=timevar){
                    that.time = timevar;
                }
            },

            timeChangeFun:function () {
                setInterval(this.B, 800)

            },
            moring :function () {
                this.showPack(1,null);
            },
            afternoon:function () {
              this.showPack(2,null);
            },

            printFafang:function () {
              print();
            },

            showPack: function (data1,data2) {
                var depnowId = $("#depId").val();
                var flag = $("#total").prop("checked");
                var type = 0;
                var timeType= 0;
                //按照科室排序
                var timeOrder = 3;
                if(data2!=null){
                    timeOrder = data2;
                }
                if(flag){
                    type = 1;
                }else{
                    type = 0;
                }
                if(data1!=null){
                    if(!isNaN(data1)){
                        timeType = data1;
                    }
                }
                var sendId = $("#sendId").val();
                vue.setCon({
                    depId: depnowId,
                    searchTxt:this.searchTxt,
                    time:this.time,
                    type:type,
                    timeType:timeType,
                    timeOrder:timeOrder,
                    sendId:sendId,
                })
            },
            load: function () {
                $.get("/recover/addPackage", function (data) {
                    if (data.status == true) {
                        vm.depList = data.depList;
                        vm.sendList = data.sendImList;
                    }
                })
            },

        }

    });



    function selectedChange(data){
        var timeOrder = data;
        if(data!=null){
            vm.showPack(null,data);
        }else {
            vm.showPack(null,null);
        }

    }

    function callbackData() {
        vm.showPack(null,null);
    }



    function getSelRecord() {
        var chk_value = new Array();
        var ck = new Array();
        var obj = new Object();
        $('input[name="packageTiaoma"]:checked').each(function () {
            var data = $(this).parent().attr("data");
            var tiaoArr = new Array();
            tiaoArr = data.split(",");
            chk_value = chk_value.concat(tiaoArr);
            ck.push(tiaoArr);
        });
        obj.chk_value = chk_value;
        obj.ck = ck;
        return obj;
    }


</script>

</html>
